.classhour {
  display: flex;
  justify-content: center;
  .classhour-wrap {
    max-width: 100%;
    flex-basis: 1160px;
    padding: 1.25rem 0;

    .classhour-categorylist {
      .categorylist-wrap {
        display: flex;
        margin-bottom: 0.75rem;
        .category-item {
          font-size: 1.125rem;
          margin-right: 1rem;
          cursor: pointer;
          &:hover {
            color: #1d7dfa;
          }
        }
      }
    }

    .classhour-src-wrap {
      display: flex;
      .player-wrap {
        height: 30.9375rem;
        width: 52.3125rem;
        flex-grow: 1;
        flex-shrink: 0;
        background-color: blue;
        .player-ele {
          width: 100%;
          height: 100%;
          object-fit: fill;
        }
      }
      .catalogue-wrap {
        padding: 0.3125rem 0;
        height: 30.9375rem;
        max-width: 17.5rem;
        box-sizing: border-box;
        flex-grow: 1;
        flex-shrink: 1;
        color: #a1a9b2;
        background-color: #1b2128;
        overflow-x: hidden;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          width: 10px;
          background-color: initial;
        }
        &::-webkit-scrollbar-button {
          height: 0;
          width: 0;
          display: none;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #586470;
          mix-blend-mode: normal;
          min-height: 115px;
          border-radius: 4px;
        }

        .chapter-name {
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
          padding: 0.3125rem 0.625rem;
        }

        .classhour-name {
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
          padding: 0.1875rem 1rem;
          cursor: pointer;
          &:hover {
            color: #1d7dfa;
          }
        }
        .idx {
          margin-right: 0.25rem;
        }
      }
      @media screen and (max-width: 799px) {
        .player-wrap {
          width: 100%;
          height: auto;
        }
        .catalogue-wrap {
          display: none;
        }
      }
    }

    .classhour-info {
      .classhour-name {
        padding-bottom: 1.125rem;
        font-size: 1.5rem;
        line-height: 2rem;
        color: #0f1419;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
      }
      .classhour-count {
        display: flex;
        padding: 0.5rem 0;
        .count-item {
          margin-right: 1rem;
          i {
            font-size: 1.5rem;
          }
          span {
            font-size: 1.125rem;
          }
        }
      }
    }

    .bottom-box {
      display: flex;
      justify-content: space-between;
      .comment-list {
        box-sizing: border-box;
        width: 52.3125rem;
      }
      .recommend-lesson-list {
        .lesson-item {
          margin: 0.75rem 0.5rem;
        }
      }
      .comment-list .head,
      .recommend-lesson-list .head {
        box-sizing: border-box;
        width: 100%;

        font-size: 1.125rem;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        .comment-action {
          font-size: 1.25rem;
          cursor: pointer;
          color: #fe7731;
        }
      }
    }
    @media screen and (max-width: 769px) {
      .classhour-categorylist {
        .categorylist-wrap {
          padding-left: 0.75rem;
          padding-right: 0.75rem;
        }
      }
      .classhour-info {
        .classhour-count,
        .classhour-name {
          padding-left: 0.75rem;
          padding-right: 0.75rem;
        }
      }
      .bottom-box {
        flex-wrap: wrap;
        .comment-list {
          order: 1;
          width: 100%;
          & > div:first-child {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
          }
        }
        .recommend-lesson-list {
          order: 0;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;
          & > div:first-child {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
          }
          .lesson-item {
            // width: 40%;
          }
          .mark-i {
            height: 1px;
            width: 16.875rem;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
